{extend name="property/public/insidePageBase" /}
{block name="title"}设备批量充值{/block}
{block name="css"}
{__block__}
<style>
    body{ margin:0; }
    .layui-iconpicker-body.layui-iconpicker-body-page .hide {display: none;}
    body .layui-iconpicker .layui-iconpicker-icon-item{ width: 20.1%; }
    body{  background-color: #ffffff; }
    .layui-upload-img-box { float:left;  margin-bottom: 2px;margin-right: 2px; background: #e0e0e0;  padding: 1px; }
    .layui-upload-img {width: 82px; height: 82px; margin-bottom: 1px;}
</style>
{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">支付方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="pay_method" autocomplete="off" value="1" title="微信">
                    <input type="radio" name="pay_method" autocomplete="off" value="2" title="支付宝">
                    <input type="radio" name="pay_method" autocomplete="off" value="3" title="银联">
                    <input type="radio" name="pay_method" autocomplete="off" value="4" title="现金">
                    <input type="radio" name="pay_method" autocomplete="off" value="5" title="企业微信">
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label indispensable">充值方式</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_type" autocomplete="off" value="1" title="增加" checked>
                            <input type="radio" name="is_type" autocomplete="off" value="2" title="减少">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">充值金额</label>
                        <div class="layui-input-block">
                            <input type="text" name="pay_amount"  autocomplete="off"  class="layui-input" placeholder="请输入充值金额" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark"></textarea>
                </div>
            </div>
            <table id="repairTable" lay-filter="repairTable"></table>
            <script type="text/html" id="plan_type_tpl">
                {{# if(d.plan_type === 1) { }}<span class="layui-badge layui-bg-blue">后付费</span>{{# } }}
                {{# if(d.plan_type === 2) { }}<span class="layui-badge layui-bg-cyan">系统预付费</span>{{# } }}
                {{# if(d.plan_type === 3) { }}<span class="layui-badge layui-bg-red">离线预付费</span>{{# } }}

                {{# if(d.energy_type === 11) { }}<span class="layui-badge layui-bg-blue">电表</span>{{# } }}
                {{# if(d.energy_type === 12) { }}<span class="layui-badge layui-bg-cyan">冷水表</span> {{# } }}
                {{# if(d.energy_type === 13) { }}<span class="layui-badge layui-bg-red">热水表</span> {{# } }}
                {{# if(d.energy_type === 14) { }}<span class="layui-badge layui-bg-purple">燃气表</span> {{# } }}
            </script>
            <div class="layui-form-item layui-hide">
                <input type="hidden" name="id" value="{:request()->get('id')}" />
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
{__block__}
<script>
    var rechargeData = [];
    layui.use(['form', 'laytpl','table'], function () {
        var form = layui.form, table = layui.table;
        rechargeData = {:json_encode($rechargeData)};
        $('#meterNumBox').show()
        let tableObj = table.render({
            elem: '#repairTable' //指定原始表格元素选择器（推荐id选择器）
            ,id:'repairTable'
            ,data:rechargeData
            ,height: 400 //容器高度
            ,cols: [[
                {field: 'energy_no', width: 138, title: '设备编号', sort: true},
                {field: 'energy_name', width: 198, title: '安装地址', sort: true},
                {field: 'plan_type', width: 148, title: '设备类型', templet:'#plan_type_tpl', sort: true, rowspan: 2},
                {field: 'balance', width: 108, title: '设备余额', templet:function(d) {
                        return d.balance + ' ¥';
                    },sort: true},
                {field: 'read_time', width: 168,title: '抄表时间', sort: true, rowspan: 2, templet:(d) => {
                        if(parseInt(d.read_time) > 0) {
                            return d.read_time
                        }
                        return '未抄表'
                    }},
            ]],
            limit: 1000,
            size:'sm'
        });
    });
</script>
{/block}